<template>
	<header>
		<i class="iconfont icon-sort" @click="goSort" />
		<div class="search" @click="goSearch">
			<i class="fas fa-search"></i>
			<span>新鲜红薯叶</span>
		</div>
		<i class="iconfont icon-liaotian" />
	</header>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	let router = useRouter()
	// 点击搜索
	const goSearch = () => {
		router.push('/index')
	}
	// 点击分类
	const goSort = () => {
		router.push('/sort')
	}
</script>

<style scoped>
	header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 1.23rem;
		padding: 0.2rem 0.15rem;
		background-color: #fff;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
	}

	i {
		font-size: 0.7rem;
		color: #999;
	}

	.search {
		width: 7rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.4rem;
		color: #999;
		background-color: #eee;
		border-radius: 0.5rem;
	}

	.fa-search {
		font-size: 0.4rem;
		margin: 0 0.2rem;
	}
</style>